<template>
  <div class="cart">
    <van-empty
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="购物车为空"
      v-if="cart.length === 0"
    />
      <van-swipe-cell
      v-for="(item,index) in cart"
      :key="index"
      >
        <van-card
          :price="item.malMobilePrice"
          :title="item.name1"
          :desc="item.norm"
          class="goods-card"
          :thumb="item.masterImg"
        >
        <template #price>
          ￥<span class="moeny">{{item.malMobilePrice}}</span>
          <i class="iconfont" @click="message({id: item.id,norm :item.norm})">&#xe614;</i>
          <van-stepper
          :value="item.amount"
          integer
          @change="modifyAmount({ id:item.id, amount: $event })"
          />
        </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="message({id: item.id,norm :item.norm})"/>
        </template>
     </van-swipe-cell>
    <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit">
    </van-submit-bar>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { mapGetters, mapMutations, mapState } from 'vuex'
export default {
  name: 'Cart',
  created () {
    console.log('购物车：', this.$store.state.cart)
  },
  computed: {
    // cart () {
    //   return this.$store.state.cart
    // }
    ...mapState(['cart']),
    ...mapGetters(['total'])
  },
  methods: {
    getNorm: function(item){
      console.log(item);
      if(this.cart.norm) return ''
      else return 0
    },
    // 使用 mapMutations 辅助函数将组件中的 methods映射为 store.commit调用
    ...mapMutations(['removeFromCart', 'modifyAmount']),
    onSubmit () {
      console.log('提交待开发')
    },
    message (id,norm) {
      Dialog.confirm({
        title: '提示',
        message: '是否确定删除'
      })
        .then(() => {
          // on confirm
          console.log('确定删除')
          this.removeFromCart(id,norm)
        })
        .catch(() => {
          // on cancel
          console.log('取消删除')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  @font-face {
  font-family: 'iconfont';  /* Project id 2770993 */
    src: url('//at.alicdn.com/t/font_2770993_r8utusd18rj.woff2?t=1629965027192') format('woff2'),
        url('//at.alicdn.com/t/font_2770993_r8utusd18rj.woff?t=1629965027192') format('woff'),
        url('//at.alicdn.com/t/font_2770993_r8utusd18rj.ttf?t=1629965027192') format('truetype');
  }
  .iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

  .goods-card {
    margin: 0;
    // background-color: #fff;
  }
  .delete-button {
    height: 100%;
  }
  .iconfont{
    position: absolute;
    right: 0;
    font-size: 19px;
    // margin-top: 10px;
  }
  .oncheck{
    position: absolute;
    right: -2px;
    top: 19px;
  }
  .moeny{
    font-size: 14px;
    color: red;
  }
</style>
